import { createApp } from 'https://unpkg.com/vue@3/dist/vue.esm-browser.js'

const app = createApp({
    data() {
        return {
            empList: [
                { name: 'JiQi', age: 18, headShot: './resources/pic/headshot.png', title: '1' },
                { name: 'LaoBa', age: 19, headShot: './resources/pic/headshot.png', title: '2' },
                { name: 'LiangJiu', age: 20, headShot: './resources/pic/headshot.png', title: '3' },
                { name: 'QueShi', age: 22, headShot: './resources/pic/headshot.png', title: '4' },
                { name: 'ZhangSan', age: 18, headShot: './resources/pic/headshot.png', title: '1' },
                { name: 'LiSi', age: 19, headShot: './resources/pic/headshot.png', title: '2' },
                { name: 'WangWu', age: 20, headShot: './resources/pic/headshot.png', title: '3' },
                { name: 'GuaiLiu', age: 22, headShot: './resources/pic/headshot.png', title: '4' }
            ],
            // 定义搜索表单，用于采集用户输入数据
            searchForm: {
                name: '',
                title1: false,
                title2: false,
                title3: false,
                title4: false
            },
            // 添加一个用于显示过滤结果的新数组
            filteredEmpList: []
        }
    },
    // 在创建应用时初始化filteredEmpList
    created() {
        this.filteredEmpList = [...this.empList];
    },
    methods: {
        search() {
            console.log("搜索按钮被点击了");
            
            // 获取用户输入数据
            let name = this.searchForm.name;
            let title1 = this.searchForm.title1;
            let title2 = this.searchForm.title2;
            let title3 = this.searchForm.title3;
            let title4 = this.searchForm.title4;
            
            console.log("搜索条件:", {name, title1, title2, title3, title4});

            // 如果没有任何筛选条件，则显示所有员工
            if (!name && !title1 && !title2 && !title3 && !title4) {
                this.filteredEmpList = [...this.empList];
                return;
            }

            // 定义一个空数组，用于存放搜索结果
            let resultList = [];
            
            for (let i = 0; i < this.empList.length; i++) { 
                let emp = this.empList[i];
                
                // 检查姓名是否匹配（如果提供了姓名）
                let nameMatch = !name || emp.name.includes(name);
                
                // 检查职称是否匹配（如果有任何职称选择）
                let titleMatch = false;
                if (!title1 && !title2 && !title3 && !title4) {
                    // 如果没有选择任何职称，则匹配所有
                    titleMatch = true;
                } else {
                    // 根据选择的职称进行匹配
                    if ((title1 && emp.title === '1') || 
                        (title2 && emp.title === '2') || 
                        (title3 && emp.title === '3') || 
                        (title4 && emp.title === '4')) {
                        titleMatch = true;
                    }
                }
                
                // 如果姓名和职称都匹配，则添加到结果列表中
                if (nameMatch && titleMatch) {
                    resultList.push(emp);
                }
            }
            
            console.log("搜索结果:", resultList);
            // 更新filteredEmpList以在页面上显示结果
            this.filteredEmpList = resultList;
        },
        resetForm() {
            // 重置表单数据
            this.searchForm.name = '';
            this.searchForm.title1 = false;
            this.searchForm.title2 = false;
            this.searchForm.title3 = false;
            this.searchForm.title4 = false;
            // 显示所有员工
            this.filteredEmpList = [...this.empList];
        }
    },
}
).mount('#app')